<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单展示</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
		font-size: 14px;
		color: #393939;
	}
	body{
		padding: 20px;
	}
	.search{
		height: 40px;
		background-color: #eee;
		padding: 0 15px ;
		margin-bottom: 30px;
	}
	.search span{
		line-height: 40px;
		
	}
	.search input{
		padding: 5px 4px;
		border-color: #b5b5b5;
		color: #858585;
		border-radius: 5px;
		margin-left: 30px;
		margin-right: 50px;
	}
	.search input:hover{
		border-color: rgb(245,153,66);
	}
	.btn_search{
		height: 32px;
    	background: #2a8bcc!important;
    	background-image: linear-gradient(to bottom,#3b98d6 0,#197ec1 100%)!important;
    	background-repeat: repeat-x!important;
    	line-height: 32px;
    	border: 0px;
    	width: 60px;
    	text-align: center;
    	color: #FFF;
	}
	.icon-search{
		color: #FFF;
	}
	.l_f>a>i{
		color: #fff;
	}
	#sample-table_wrapper{
		height: 700px;

		padding: 15px 10px;
		
	}
	#sample-table_length{
		margin-bottom: 10px;
	}
	table img{
		width: 200px;
		height: 100px;
	}
	td{
		text-align: center;
	}
	#sample-table_paginate{
		text-align: center;
		margin-top: 30px;
	}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//选择页面中name为select的input元素
		$("input[name='select']").click(function(){
			if($(this).val() == 0){					//获取当前点击的元素的值判断是否为0
				$(".sab").prop("checked", true);	//获取类别名为sab的元素，设置为选中状态
				$(this).val(1);						//赋值为1表示已全选
			}else{
				$(".sab").prop("checked", false);	//获取类别名为sab的元素，设置为取消选中状态
				$(this).val(0);						//赋值为0表示取消全选
			}
		});
		
		$.get("selectAllOrder.do",function(result){
			$("#orderList").empty();
			let str = "";
			for(let i = 0; i < result.length; i++){
				let order = result[i];
				str += '<tr>';
				str += '<td><input type="checkbox" class="sab"></td>';
				str += '<td><span>'+order.oid+'</span></td>';
				str += '<td><span>'+order.uid+'</span></td>';
				str += '<td><span>'+order.ooldprice+'</span></td>';
				str += '<td><span>'+order.onowprice+'</span></td>';
				str += '<td><span>'+order.count+'</span></td>';
				str += '<td><span>'+order.createtime+'</span></td>';
				str += '<td><span>'+order.endtime+'</span></td>';
				str += '<td><span>'+order.oflag+'</span></td>';
				str += '<td><span>'+order.oremark+'</span></td>';
				str += '<td>';
				str += '<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">';
				str += '<i class="icon-edit bigger-120"></i>';
				str += '</a>';
				str += '<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">';
				str += '<i class="icon-trash  bigger-120"></i>';
				str += '</a>';
				str += '</td>';
				str += '</tr>';
			}
			$("#orderList").append(str);
		});
		
	});
</script>
</head>
<body>
	<div class="search">
		<span>订单编号: </span>
		<input type="text" placeholder="请输入要检索的订单编号">
		<button class="btn_search">
			<i class="icon-search"></i>
			搜索
		</button>
	</div>
	
	<div class="border clearfix">
		<span class="l_f">
        	<a href="addUser.html" title="添加订单" class="btn btn-warning Order_form"><i class="icon-plus"></i>添加订单</a>
        	<a href="javascript:ovid()" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
       </span>
       <span class="r_f">共：<b id="count">34</b>个订单</span>
	</div>
	
	<div id="sample-table_wrapper" class="dataTables_wrapper no-footer">
		<div class="dataTables_length" id="sample-table_length">
			<label>每页显示条数: 
				<select name="sample-table_length" aria-controls="sample-table" class="">
					<option value="10">10</option>
					<option value="25">25</option>
					<option value="50">50</option>
					<option value="100">100</option>
				</select>
			</label>
		</div>
		<table class="table table-striped table-bordered table-hover dataTable no-footer" 
				id="sample-table" role="grid" aria-describedby="sample-table_info">
				<thead>
					<tr role="row">
						<th><input type="checkbox" class="sab" name="select" value="0"></th>
						<th><span>订单编号</span></th>
						<th><span>用户名</span></th>
						<th><span>总价</span></th>
						<th><span>折扣后价格</span></th>
						<th><span>商品数量</span></th>
						<th><span>订单的创建时间</span></th>
						<th><span>订单的完成时间</span></th>
						<th><span>订单状态</span></th>
						<th><span>备注</span></th>
						<th><span>操作</span></th>
					</tr>
				</thead>
				<tbody id="orderList">
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>20221208164625002</span></td>
						<td><span>张三</span></td>
						<td><span>495.6</span></td>
						<td><span>415.3</span></td>
						<td><span>13</span></td>
						<td><span>2022-12-08 16:48:36</span></td>
						<td><span>2022-12-08 16:50:04</span></td>
						<td><span>已支付</span></td>
						<td><span>备注：请多放辣椒</span></td>
						<td>
							<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">
								<i class="icon-edit bigger-120"></i>
							</a>
							<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>20221208164625002</span></td>
						<td><span>张三</span></td>
						<td><span>495.6</span></td>
						<td><span>415.3</span></td>
						<td><span>13</span></td>
						<td><span>2022-12-08 16:48:36</span></td>
						<td><span>2022-12-08 16:50:04</span></td>
						<td><span>已支付</span></td>
						<td><span>备注：请多放辣椒</span></td>
						<td>
							<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">
								<i class="icon-edit bigger-120"></i>
							</a>
							<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>20221208164625002</span></td>
						<td><span>张三</span></td>
						<td><span>495.6</span></td>
						<td><span>415.3</span></td>
						<td><span>13</span></td>
						<td><span>2022-12-08 16:48:36</span></td>
						<td><span>2022-12-08 16:50:04</span></td>
						<td><span>已支付</span></td>
						<td><span>备注：请多放辣椒</span></td>
						<td>
							<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">
								<i class="icon-edit bigger-120"></i>
							</a>
							<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>20221208164625002</span></td>
						<td><span>张三</span></td>
						<td><span>495.6</span></td>
						<td><span>415.3</span></td>
						<td><span>13</span></td>
						<td><span>2022-12-08 16:48:36</span></td>
						<td><span>2022-12-08 16:50:04</span></td>
						<td><span>已支付</span></td>
						<td><span>备注：请多放辣椒</span></td>
						<td>
							<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">
								<i class="icon-edit bigger-120"></i>
							</a>
							<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" class="sab"></td>
						<td><span>20221208164625002</span></td>
						<td><span>张三</span></td>
						<td><span>495.6</span></td>
						<td><span>415.3</span></td>
						<td><span>13</span></td>
						<td><span>2022-12-08 16:48:36</span></td>
						<td><span>2022-12-08 16:50:04</span></td>
						<td><span>已支付</span></td>
						<td><span>备注：请多放辣椒</span></td>
						<td>
							<a title="查看详情"  href="javascript:;" class="btn btn-xs btn-info">
								<i class="icon-edit bigger-120"></i>
							</a>
							<a title="删除"  href="javascript:;" class="btn btn-xs btn-warning">
								<i class="icon-trash  bigger-120"></i>
							</a>
						</td>
					</tr>
					
				</tbody>
		</table>
		<div class="dataTables_paginate paging_bootstrap" id="sample-table_paginate">
			<ul class="pagination">
				<li class="prev disabled">
					<a href="#">上一页</a>
				</li>
				<li class="active">
					<a href="#">1</a>
				</li>
				<li>
					<a href="#">2</a>
				</li>
				<li class="next">
					<a href="#">下一页</a>
				</li>
			</ul>
		</div>
	</div>
	
	
</body>
</html>

















